<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="information">
				<view class="title">
					商品信息
				</view>
				<view class="commodity">
					<view class="img">
						<img :src="data.goods_img" alt="">
					</view>
					<view class="data">
						<view class="name twoOver">
							{{data.goods_name}}
						</view>
						<view class="price">
							{{data.goods_price}}能量
						</view>
					</view>
				</view>
			</view>
			<view class="address" v-if="data.goods_type == 2">
				<view class="title">
					收货地址
				</view>
				<view class="choice">
					<view class="text" v-if="blank">
						<view class="region">
							你还未添加地址，快去添加吧
						</view>
					</view>
					<view v-else class="text" v-for="(item,index) in list" :key="index" @click="Select(item)">
						<view class="region">
							{{item.format_detail}}
						</view>
						<view class="icon">
							<img v-if="item.is_default == 1" src="../../../static/images/user/choice1.png" alt="">
							<img v-else src="../../../static/images/user/choice.png" alt="">
						</view>
					</view>
					
					<view class="more" @click="nav_addAddress">
						添加地址
						<view class="img">
							<img src="../../../static/images/user/icon_right.png" alt="">
						</view>
					</view>
				</view>
				<view class="noChoice">

				</view>
			</view>
			<view class="Submit" v-if="isBTN" @tap.stop.prevent='Submit'>
				立即兑换
			</view>
			<view class="Submit" v-else style="background-color: $999;">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	import verify from '../../../utils/verify';

	export default {

		data() {
			return {
				goods_id: null,
				address_id:null,
				data: {},
				list: [],
				blank:false,
				isBTN:true
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.goods_id = options.goods_id
			this.token = uni.getStorageSync('token')
			this.getOrderData()
			this.getAddList()
		},
		onShow() {

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		created() {},
		methods: {
			Select(e){
				console.log(e)
				this.list.forEach((item)=>{
					item.is_default = 0
				})
				e.is_default = 1
				this.address_id = e.address_id
				this.$forceUpdate()
			},
			nav_addAddress(){
				console.log(111)
				uni.redirectTo({
						url: `../addressManagement/index`
					});
			},
			//获取订单信息
			getOrderData() {
				let _this = this
				app._post_form('Jadegoods/getPlaceOrder', {
					goods_id: _this.goods_id
				}, function(result) {
					if (1 == result.code) {
						_this.data = result.data.info
						console.log(_this.data)
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.disabled = false;
				});
			},
			//获取地址列表
			getAddList(){
				let _this = this
				app._post_form('JadeAddress/lists', {}, function(result) {
					if (1 == result.code) {
						_this.list = result.data.list
						console.log(_this.list)
						if(_this.list.length > 0){
							_this.blank = false
							if(_this.list.length == 1){
								_this.list[0].is_default == 1
								_this.address_id = _this.list[0].address_id
							}else{
								_this.list.forEach((item,index)=>{
									if(index == 0){
										item.off = true
										_this.address_id = item.address_id
									}else{
										item.off = false
									}
									
								})
							}
							
							
						}else{
							_this.blank = true
						}
						
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.disabled = false;
				});
			},
			//点击购买
			Submit() {
				let _this = this
				this.isBTN = false
				app._post_form('Jadegoods/exchangeJade', {
					goods_id: _this.goods_id,
					address_id: _this.address_id
				}, function(result) {
					if (1 == result.code) {
						app.showToast('兑换成功');
						setTimeout(() => {
							uni.redirectTo({
								url: `./index`
							});
						}, 1500)

					}
				}, null, function() {
					// 解除按钮禁用
					this.isBTN = true
					app.showError(result.msg);
				});
			},

		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;

		.information {
			margin: 20rpx;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}

			.commodity {
				margin-top: 24rpx;
				display: flex;

				.img {
					width: 216rpx;
					height: 180rpx;
					margin-right: 16rpx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 4rpx;
						// background-color: #fff;
					}
				}

				.data {
					.name {
						width: 414rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						height: 80rpx;
					}

					.price {
						margin-top: 60rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #FF602E;
					}
				}
			}
		}

		.address {
			margin: 20rpx;
			
			padding: 32rpx;
			padding-bottom: 300rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}
			.choice {
				// height: 500rpx;
				// overflow-y: scroll;
				.text{
					min-height: 154rpx;
					margin-top: 20rpx;
					border-bottom: 1rpx solid #999;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.region{
						width: 566rpx;
						// height: 100rpx;
						font-size: 34rpx;
						font-weight: 500;
						color: #999999;
						padding-bottom: 10rpx;
					}
					.icon{
						width: 48rpx;
						height: 48rpx;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.more {
					margin-top: 20rpx;
					
					display: flex;
					justify-content: space-between;
					font-size: 34rpx;
					font-weight: 500;
					color: #53ACFF;

					.img {
						width: 48rpx;
						height: 48rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.Submit {
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #3A81F6;
		position: fixed;
		bottom: 50rpx;
		border-radius: 10rpx;
		color: #fff;
	}
</style>
